<template>
  <div style="font-size: 14px;">
    <van-nav-bar :fixed="true" :border="true" :title="headerAndFooter.headerName"
                 :left-arrow="(headerAndFooter.pageName!='cart' && headerAndFooter.pageName!='type')"
                 @click-left="goBack" @click-right="toSearch">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import {
    Icon,
    NavBar
  } from 'vant';

  export default {
    components: {
      [Icon.name]: Icon,
      [NavBar.name]: NavBar
    },
    data() {
      return {
      };
    },
    computed: {
      ...mapGetters([
        'headerAndFooter'
      ])
    },
    mounted() {
    },
    methods: {
      toSearch(){//跳转搜索
        this.$router.push({'path': '/search'});
      },
      goBack(){//返回
        this.$router.go(-1)
      }
    }
  };
</script>

<style scoped>
  #nav-header {
    width: 100%;
    height: 3rem;
    background: linear-gradient(#f9f9f9,#d9d9d9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  #nav-header img {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0 1rem;
  }
  #nav-header h1 {
    font-size: 1.2rem;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
  }
</style>
